<!-- 签到 -->
<template>
	<view class="sign-in" :style="{ '--color': vuex_config.themeColor1 }" v-if="signList">
		<view class="sign-in-top">
			<view class="new-integral">当前积分</view>
			<view class="integral">{{ totalCount }}</view>
			<view class="functionality">
				<!-- exchange -->
				<view class="sign-in-today" @click="goInteral">兑换产品</view>
				<view class="sign-in-today " @click="bindSign(date)">{{ filterDate(date, signList) ? '今日已签到' : '签到' }}</view>
			</view>
		</view>
		<view class="calendar">
			<view class="calendar-title">
				<text>您已签到</text>
				<text class="calendar-number">{{ signList.length }}</text>
				<text>天</text>
			</view>
			<view class="calendar-sign">
				<view class="calendar-sign-item" v-for="(item, index) in days" :key="index">
					<!-- <image src="" class="calendar-img"></image> -->
					<view class="flex-cu">
						<image :src="`../static/ic_5${filterDate(index + 1, signList) ? '6' : '5'}.png`" class="calendar-img"></image>
						<view class="calendar-img-title" :style="{ color: filterDate(index + 1, signList) ? '#e93324' : '#ccc' }">
							{{ date - 1 == index ? '今日' : index + 1 }}
						</view>
					</view>
					<view class="calendar-line" v-if="index == 12 ? false : index == 19 ? false : index == 26 ? false : index == days - 1 ? false : true"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { uniToast } from '@/utils/uniPromise.js';
import { getDateObject } from '@/utils/moment/index';
import { mapState, mapActions } from 'vuex';
export default {
	data() {
		return {
			days: '', //当前月份天数
			dateObj: '', //时间函数
			signList: null, //签到天数集合
			date: '', //今日几号
			totalCount: 0 ,//积分数量
			loading:false
		};
	},

	onLoad: function() {
		this.$loading();
		this.loadUserCount().then(()=>{
			this.initPage();
		})
	},

	computed: {
		...mapState(['vuex_business', 'vuex_count']),
		filterDate() {
			return function(item, list) {
				return list.some(function(select) {
					return item == select;
				});
			};
		}
	},
	methods: {
		// 查询用户数据、余额
		...mapActions(['loadUserCount']),
		// 获取当前月签到日
		initPage() {
			this.totalCount = this.vuex_count.integral || 0;
			this.dateObj = getDateObject();
			let dateObj = this.dateObj;
			this.days = dateObj.days; //获取这个月的天数
			this.date = dateObj.date; //获取今天几号
			this.$resPost('GetUsersSignIn', {
				type: 1,
				start_date: dateObj.year + '-' + dateObj.month + '-' + '01',
				end_date: dateObj.year + '-' + dateObj.month + '-' + dateObj.days + ' 23:59:59'
			})
				.then(({ data }) => {
					this.signList = data.map(item => {
						return getDateObject(item.date_creation).date;
					});
					this.$hide();
				})
				.catch(() => {
					this.$hide();
				});
		},

		// 点击签到
		bindSign(index) {
			if(this.loading){return}
			this.loading = true
			let integral = this.vuex_business.signin;
			let { dateObj } = this;
			let signList = new Set(this.signList);
			if (!signList.has(dateObj.date)) {
				this.$loading()
				this.$resPost('AddUsersIntegral', {
					remark: '签到赠积分',
					type: 1,
					integral
				}).then(() => {
					signList.add(dateObj.date);
					this.signList = [...signList];
					this.totalCount = parseInt(this.totalCount) + 10;
					uniToast('签到成功');
					this.loadUserCount()
					this.$hide()
					this.loading = false
				}).catch(()=>{this.loading = false})
			}else{
				this.loading = false
			}
		},
		goInteral() {
			this.$linkTo(`/package/integral/index`);
		}
	}
};
</script>

<style lang="scss" scoped>
.sign-in-top {
	position: relative;
	width: 100%;
	height: 478rpx;
	padding-top: 60rpx;
	background-color: var(--color);
	border-radius: 0 0 35rpx 35rpx;
}

.new-integral {
	margin-bottom: 29rpx;
	color: #fff;
	font-size: 26rpx;
	text-align: center;
}

.integral {
	font-size: 50rpx;
	font-weight: 700;
	color: #fff;
	text-align: center;
	margin-bottom: 58rpx;
}

.functionality {
	display: flex;
	justify-content: space-between;
	padding: 0 60rpx;
}

.exchange {
	width: 300rpx;
	height: 70rpx;
	border: 1rpx solid #ffffff;
	border-radius: 35rpx;
	text-align: center;
	line-height: 70rpx;
	opacity: 0.8;
	color: #fff;
}

.sign-in-today {
	width: 300rpx;
	height: 70rpx;
	text-align: center;
	line-height: 70rpx;
	background-image: linear-gradient(#ffffff, #ffffff, #b4e5fd);
	border-radius: 35rpx;
	color: var(--color);
	font-weight: 500;
}

.calendar {
	padding: 0 33rpx;
	position: absolute;
	top: 420rpx;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 690rpx;
	height: 722rpx;
	background-color: #fff;
	border-radius: 10rpx 10rpx 0 0;
	box-shadow: 0px 2px 43px 0px rgba(0, 0, 0, 0.1);
}

.calendar-title {
	color: #333333;
	font-size: 28rpx;
	margin: 60rpx 0;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 3rpx;
}

.calendar-number {
	color: #00a6f8;
	font-weight: 700;
}

.calendar-img {
	width: 48rpx;
	height: 48rpx;
}

.calendar-line {
	width: 28rpx;
	height: 4rpx;
	background-color: var(--color);
	margin: 0 10rpx;
	margin-top: 22rpx;
}

.calendar-sign {
	display: flex;
	flex-wrap: wrap;
}

.calendar-sign-item {
	display: flex;
	// align-items: center;
}

.calendar-sign .calendar-sign-item:first-child {
	margin-left: 95rpx;
}

.calendar-sign .calendar-sign-item:nth-of-type(6) .calendar-line:nth-of-type(2) {
	display: none;
}

.calendar-sign .calendar-sign-item:nth-of-type(6) {
	margin-left: 0rpx;
}

.calendar-img-title {
	font-size: 22rpx;
	margin-top: 7rpx;
	text-align: center;
	margin-bottom: 30rpx;
}

.flex-cu {
	display: flex;
	flex-direction: column;
}
</style>
